<template>
  <div>
    <tableHeader />
    <!-- 设备详情 -->
    <el-card class="device_info-card lg-mb-20">
      <el-tabs
        type="border-card"
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="历史数据" name="History">
          <HistoryContainer v-if="state.tabPane.HistoryShow" ref="HistoryRef" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { provide, reactive, onMounted, ref } from "vue";
import { DictOperation } from "@/utils/common"; // 导入表格api方法生成器
import { useBusiness } from "@/store/backend/BusinessM/info";
// import HistoryContainer from "./historyComponents/index.vue";
import { useAssetCabinet } from "@/store/backend/Assets/cabinet";
import { useNavTabs } from "@/store/navTabs";
import type { TabsPaneContext } from "element-plus";
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";
import tableHeader from "./tableHeader.vue";
import { useDeviceRealTime } from "@/store/backend/Monitor/realTime";
import HistoryContainer from "./historyComponents/index.vue";

const navTabs = useNavTabs();
const business = useBusiness();
const cabinet = useAssetCabinet();
const realTime = useDeviceRealTime();
const itemObject = useWarningItemObject();

//初始化字典处理类
const dictOperation = new DictOperation();

const HistoryRef = ref(); //历史页面
//当前标签页
const activeName = ref("History");

const state: {
  objectOptions: anyObj[];
  currentTabName: string;
  tabPane: anyObj;
} = reactive({
  objectOptions: [], //告警对象列表
  currentTabName: "",
  tabPane: {
    HistoryShow: true,
  },
});

//标签页点击切换
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log("tab 被选中时触发", tab.paneName, event);
  //保存当前标签页名称
  state.currentTabName = tab.paneName as string;
  switch (tab.paneName) {
    case "History":
      //历史数据模块
      state.tabPane.HistoryShow = true;
      break;
    default:
      state.tabPane.HistoryShow = false;
      break;
  }
};

//判断字典值
const getDictionaryValue = (val: any) => {
  return cabinet.tags["cabinetType"][val];
};

//遍历历史数据默认字段
const ergodic = () => {
  let len = realTime.DefaultFields,
    newArr: string[] = [];
  for (let i = 0; i < len; i++) {
    newArr.push(realTime.DefaultFields[i].dictValue);
  }
  realTime.DefaultFieldsString = newArr;
};

onMounted(() => {
  //遍历历史数据默认字段
  ergodic();
});

provide("navTabs", navTabs);
provide("cabinet", cabinet);
provide("itemObject", itemObject);
provide("realTime", realTime);
provide("dictOperation", dictOperation);
</script>
<style lang="scss" scoped>
.business_info {
  &-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .business_devices-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.lg-mb-20 {
  margin-bottom: 20px;
}
</style>
